<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>bootstrap作业</title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
		@media (max-width: 768px){
			
			.navbar-header {
		   		text-align: center;
		    	width: 100%;
		    	align-items: center;
		    	justify-content:center;
		    	display: flex;
			}
			.navbar-brand {
				float:none;
			    display:inline-block;
			  	margin-left: auto;
			  	margin-right: auto;
			}
			.navbar-toggle{
				float: left;
				margin-left:0;
				border: none;
				margin-right: 0px;
			}
			.navbar-nav{
				padding-left:48px ;
				padding-right: 48px;
				font-size:large ;
			}
			.nav-list{
			background:url(img/background.png) repeat-x;
			}
			#imformation1{
				display: none;
			}
			#imformation2{
				display: none; 
			}
			#imformation3{
				display: none; 
			}
			#imformation4{
				display: none; 
			}
			#imformation5{
				display: none; 
			}
			#imformation6{
				display: none; 
			}
			#imformation7{
				display: none; 
			}
			
			#imformation1-hide{
				display: none;
			}
			#imformation2-hide{
				display: none;
			}
			#imformation3-4-hide{
				display: none;
			}
			#imformation5-6-hide{
				display: none;
			}
			#imformation7-hide{
				display: none;
			}
			
		}
		@media (max-width: 360px) {
			.col-xs-6{
				width: 100%;
			}
		}
		@media (min-width: 768px){
		
			.nav-list{
				padding:0 10px ;
			}
			#imformation-button1{
				display: none;
			}
			#imformation-button2{
				display: none;
			}
			#imformation-button3{
				display: none;
			}
			#imformation-button4{
				display: none;
			}
			#imformation-button5{
				display: none;
			}
			#imformation-button6{
				display: none;
			}
			#imformation-button7{
				display: none;
			}
		}
		.collapse-list{
			padding: 0 20%;
		}
		.list-style{
			font-size: small;  
			color: #3C3C3C ;
		}
		.list-background{
			background: url(img/imformation2.png) repeat-x; 
			cursor: pointer;
			padding-top: 10px;
			padding-left:20px ;
		}
		#carousel-left{
			background-image: url(img/left.png); 
			background-repeat: no-repeat;
			top: 50%;
		}
		#carousel-right{
			background-image: url(img/right.png); 
			background-repeat: no-repeat;
			top: 50%;
		}
		#navbar-style{
			padding-right: 0px;
			padding-left: 0px;
		}
		#nav-style{
			background-color: #000000;
			margin-bottom: 0px;
		}
		#nav-brand{
			float:right; 
			margin: 0px;
			padding: 0px;
			height: 50px;
		}
		#navbar-header-style{
			margin-right: 0px;
			margin-left: 0px;
		}
		#navbar-buy{
			float: right;
			margin-right: 0px;
		}
		#picture{
			padding: 0px;
		}
		
		.body-style{
			background-color: #F2F2F2;
		}
		.label-show{
			font-weight: bold;
		}
		.label-collapse{
			font-weight: 100;
		}
		.footer{
			height: 35px; 
			margin-top: 25px;
			font-size: small ;
			background: url(img/footer.png) repeat-x;
		}
		</style>
		<script type="text/javascript">
			
//			jQuery代码主要是做一个列表自适应的功能

			$(function(){
				$('button').click(function(){
					$('span.navbar-toggle').toggle('slow',);
				})
				$('#imformation-button1').click(function(){
					$('#imformation1').toggle('slow');
				})
				$('#imformation-button2').click(function(){
					$('#imformation2').toggle('slow');
				})
				$('#imformation-button3').click(function(){
					$('#imformation3').toggle('slow');
				})
				$('#imformation-button4').click(function(){
					$('#imformation4').toggle('slow');
				})
				$('#imformation-button5').click(function(){
					$('#imformation5').toggle('slow');
				})
				$('#imformation-button6').click(function(){
					$('#imformation6').toggle('slow');
				})
				$('#imformation-button7').click(function(){
					$('#imformation7').toggle('slow');
				})
			});
		</script>
	</head>
	
	
	<body class="body-style">
		
		<!---------------------------------------------导航栏部分----------------------------------------------------->
		
		<nav id='nav-style' class="navbar navbar-default navbar-static-top navbar-inverse">
			<div id='navbar-style' class="container">
				<div id="navbar-header-style" class="navbar-header">
			        <button type="button" id="brand-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
          			<a class="navbar-brand" href="#">
        				<img alt="Brand" src="img/logo2.png">
      				</a>
      				<span id="nav-brand" class="navbar-toggle collapsed">
      					<a class="navbar-brand" href="#" >
        					<img alt="Brand" src="img/logo3.png">
      					</a>
      				</span>
        		</div>	
        		<div id="navbar" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbar-brand" >
        					<ul class="nav navbar-nav" style="width: auto; text-align: center;">
					            <li><a href="#Mac">Mac</a></li>
					            <li class="nav-list" ><a href="#Ipad">iPad</a></li>
					            <li class="nav-list" ><a href="#Iphone">iPhone</a></li>
					            <li class="nav-list" ><a href="#nav-list">Watch</a></li>
					            <li class="nav-list" ><a href="#TV">TV</a></li>
					            <li class="nav-list" ><a href="#Music">Music</a></li>
					            <li class="nav-list" ><a href="#Support">Support</a></li>
					            <li class="nav-list" ><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
			         		</ul>	
        				<span class="collapse navbar-collapse" data-toggle = "collapse" data-target = "#brand-toggle">
				        <a id='navbar-buy' class="navbar-brand"  href="#">
		    				<img alt="Brand" src="img/logo3.png">
		  				</a>			          	
			         </span> 
        		</div> 
			</div>
		</nav>
		
		<!-----------------------------------------图片轮播部分----------------------------------------------------->
		
		
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
		    <ol class="carousel-indicators">
		        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		        <li data-target="#myCarousel" data-slide-to="1"></li>
		        <li data-target="#myCarousel" data-slide-to="2"></li>
		    </ol>   
		    <div class="carousel-inner">
		        <div class="item active">
		            <img src="img/img1.png" alt="iPhone">
		        </div>
		        <div class="item">
		            <img src="img/img2.png" alt="iPad">
		        </div>
		        <div class="item">
		            <img src="img/img3.png" alt="nav-list">
		        </div>
		    </div>
		    <a id="carousel-left" class="carousel-control left" href="#myCarousel" 
		        data-slide="prev">
		    </a>
		    <a id="carousel-right" class="carousel-control right" href="#myCarousel" 
		        data-slide="next" >
		    </a>
		</div>
		
		
			
		<!------------------------------------------------图片展示部分----------------------------------------------------->
		
		
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-xs-6" id="picture">
					<img src="img/img4.png" class="img-responsive"/>
				</div>
				<div class="col-sm-3 col-xs-6" id="picture">
					<img src="img/img5.png" class="img-responsive"/>
				</div>
				<div class="col-sm-3 col-xs-6" id="picture">
					<img src="img/img6.png" class="img-responsive"/>
				</div>
				<div class="col-sm-3 col-xs-6" id="picture">
					<img src="img/img7.png" class="img-responsive"/>
				</div>
			</div>
		</div>
		<!----------------------------------------------------自适应列表部分------------------------------------------------->
		
		
		<div class="container" style="margin-top: 30px;">
			<div class="row">
				<div id='imformation1-hide' class="col-md-2 col-xs-2">
					<label class="label-show">Shop and Learn</label>
					<ul class="list-unstyled">
						<li><a href="#" class="list-style">Mac</a></li>
						<li><a href="#" class="list-style">iPad</a></li>
						<li><a href="#" class="list-style">iPhone</a></li>
						<li><a href="#" class="list-style">Watch</a></li>
						<li><a href="#" class="list-style">TV</a></li>
						<li><a href="#" class="list-style">Music</a></li>
						<li><a href="#" class="list-style">iTunes</a></li>
						<li><a href="#" class="list-style">HomePod</a></li>
						<li><a href="#" class="list-style">iPod touch</a></li>
						<li><a href="#" class="list-style">Accessories</a></li>
						<li><a href="#" class="list-style">Gift Cards</a></li>
					</ul>
				</div>
				<div id="imformation-button1" class="row" style="padding-left: 20px;cursor: pointer;">
					<div class="col-md-6 pull-left">
						<label class="label-collapse">Shop and Learn</label>
						<ul id='imformation1' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Mac</a></li>
							<li class="collapse-list"><a href="#" class="list-style">iPad</a></li>
							<li class="collapse-list"><a href="#" class="list-style">iPhone</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Watch</a></li>
							<li class="collapse-list"><a href="#" class="list-style">TV</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Music</a></li>
							<li class="collapse-list"><a href="#" class="list-style">iTunes</a></li>
							<li class="collapse-list"><a href="#" class="list-style">HomePod</a></li>
							<li class="collapse-list"><a href="#" class="list-style">iPod touch</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Accessories</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Gift Cards</a></li>
					   </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
			            
				<div id='imformation2-hide' class="col-md-2 col-xs-2">
					<label class="label-show">Apple Store</label>
					<ul class="list-unstyled">
						<li><a href="#" class="list-style">Find a Store</a></li>
						<li><a href="#" class="list-style">Genius Bar</a></li>
						<li><a href="#" class="list-style">Today at Apple</a></li>
						<li><a href="#" class="list-style">Apple Camp</a></li>
						<li><a href="#" class="list-style">Field Trip</a></li>
						<li><a href="#" class="list-style">Apple Store App</a></li>
						<li><a href="#" class="list-style">Refurbished and Clearance</a></li>
						<li><a href="#" class="list-style">Financing</a></li>
						<li><a href="#" class="list-style">Reuse and Recycling</a></li>
						<li><a href="#" class="list-style">Order Status</a></li>
						<li><a href="#" class="list-style">Shopping Help</a></li>
					</ul>
				</div>
				<div id="imformation-button2" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">Apple Store</label>
						<ul id='imformation2' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Find a Store</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Genius Bar</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Today at Apple</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Apple Camp</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Field Trip</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Apple Store App</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Refurbished and Clearance</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Financing</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Reuse and Recycling</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Order Status</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Shopping Help</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				
				<div id='imformation3-4-hide' class="col-md-2 col-xs-2">
						<label class="label-show">For Education</label>
						<ul class="list-unstyled">
							<li><a href="#" class="list-style">Apple and Education</a></li>
							<li><a href="#" class="list-style">Shop for College</a></li>
						</ul>
						<label class="label-show">For Business</label>
						<ul  class="list-unstyled">
							<li><a href="#" class="list-style">Apple and Business</a></li>
							<li><a href="#" class="list-style">Shop for Business</a></li>
						</ul>
				</div>
				
				<div id="imformation-button3" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">For Education</label>
						<ul id='imformation3' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Apple and Education</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Shop for College</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				
				<div id="imformation-button4" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">For Business</label>
						<ul id='imformation4' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Apple and Business</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Shop for Business</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				
				<div id="imformation5-6-hide" class="col-md-2 col-xs-2">
					<label class="label-show">Account</label>
					<ul class="list-unstyled">
						<li><a href="#" class="list-style">Manage Your Apple ID</a></li>
						<li><a href="#" class="list-style">Apple Store Account</a></li>
						<li><a href="#" class="list-style">iCloud.com</a></li>
					</ul>
					<label class="label-show">Apple Values</label>
					<ul class="list-unstyled">
						<li><a href="#" class="list-style">Accessibility</a></li>
						<li><a href="#" class="list-style">Education</a></li>
						<li><a href="#" class="list-style">Environment</a></li>
						<li><a href="#" class="list-style">Inclusion and Diversity</a></li>
						<li><a href="#" class="list-style">Privacy</a></li>
						<li><a href="#" class="list-style">Supplier Responsibility</a></li>
					</ul>
				</div>
				
				<div id="imformation-button5" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">Account</label>
						<ul id='imformation5' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Manage Your Apple ID</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Apple Store Account</a></li>
							<li class="collapse-list"><a href="#" class="list-style">iCloud.com</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				
				<div id="imformation-button6" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">Apple Values</label>
						<ul id='imformation6' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Accessibility</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Education</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Environment</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Inclusion and Diversity</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Privacy</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Supplier Responsibility</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				
				<div id="imformation7-hide" class="col-md-2 col-xs-2">
					<label class="label-show">About Apple</label>
					<ul class="list-unstyled">
						<li><a href="#" class="list-style">Newsroom</a></li>
						<li><a href="#" class="list-style">Apple Leadership</a></li>
						<li><a href="#" class="list-style">Job Opportunities</a></li>
						<li><a href="#" class="list-style">Investors</a></li>
						<li><a href="#" class="list-style">Events</a></li>
						<li><a href="#" class="list-style">Contact Apple</a></li>
					</ul>
				</div>
				
				<div id="imformation-button7" class="row list-background" >
					<div class="col-md-6 pull-left">
						<label class="label-collapse">About Apple</label>
						<ul id='imformation7' class="list-unstyled">
							<li class="collapse-list"><a href="#" class="list-style">Newsroom</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Apple Leadership</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Job Opportunities</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Investors</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Events</a></li>
							<li class="collapse-list"><a href="#" class="list-style">Contact Apple</a></li>
					    </ul>
					</div>
					<div class="col-md-6 pull-right">
						<button type="button">
							<span class="sr-only">Toggle navigation</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
						</button>
					</div>
				</div>
				<div id="imformation-button7" class="row list-background">&nbsp;</div>
				
			</div>   
		</div>
		
		
		<!------------------------------------------------网站的底部-------------------------------------------------------------->
		
		
		<div class="container footer">
			More ways to shop: Visit an <a href="">Apple Store</a>, call 1-800-MY-APPLE, or <a href="">find a reseller</a>.
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-10">
					Copyright © 2017 Apple Inc. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="list-style">Privacy Policy &nbsp;|</a>
					<a href="#" class="list-style">&nbsp; Terms of Usey &nbsp;|</a>
					<a href="#" class="list-style">&nbsp; Sales and Refunds &nbsp;|</a>
					<a href="#" class="list-style">&nbsp; Sales and Refunds &nbsp;|</a>
					<a href="#" class="list-style">&nbsp; Legal &nbsp;|</a>
					<a href="#" class="list-style">&nbsp; Site Map &nbsp;</a>
				</div>
				<div class="col-md-2 pull-right">
					<a href="" class="list-style"><img src="img/icon2.PNG"/>United States</a>
				</div>
			</div>
		</div>
		
		
		
	</body>
</html>